<template>
  <div class="home">
    <div style="display: flex; justify-content: center">
      <img alt="Vue logo" width="400" src="../assets/logo.png">
    </div>
    <div style="margin-top: 20px; display: flex; justify-content: center">
      <el-button @click="aaa(databb, 30, 5); flag = 'bb'">
        均值极差控制图
      </el-button>
      <el-button @click="bbb(databb, 30, 5); flag = 'bb'">
        均值标准差控制图
      </el-button>
      <el-button @click="ccc(dataaa, 40, 82, 68, 5); flag = 'aa'">
        工序能力分析图
      </el-button>
      <el-button @click="ddd(dataaa, 5); flag = 'aa'">
        直方图
      </el-button>
      <el-button @click="eee(dataaa, 5); flag = 'aa'">
        排列图
      </el-button>
      <el-button @click="fff(datacc); flag = 'cc'">
        样本趋势图
      </el-button>
      <el-button @click="ggg(datacc, 6, 4); flag = 'cc'">
        基本趋势图
      </el-button>
    </div>
    <div style="width: 100%; height: 600px; display: flex; justify-content: center; align-items: center">
      <div v-if="flag === 'aa'" style="width: 500px; height: 500px; border: 1px solid #d4d7e0; overflow: auto">
        <json-viewer
                :value="dataaa"
                :expand-depth="5"
                copyable
                sort
        ></json-viewer>
      </div>
      <div v-else-if="flag === 'bb'" style="width: 500px; height: 500px; border: 1px solid #d4d7e0; overflow: auto">
        <json-viewer
                :value="databb"
                :expand-depth="5"
                copyable
                sort
        ></json-viewer>
      </div>
      <div v-else-if="flag === 'cc'" style="width: 500px; height: 500px; border: 1px solid #d4d7e0; overflow: auto">
        <json-viewer
                :value="datacc"
                :expand-depth="5"
                copyable
                sort
        ></json-viewer>
      </div>
      <div v-else style="width: 500px; height: 500px; border: 1px solid #d4d7e0; overflow: auto;display: flex;justify-content: center;align-items: center">
        {{ '请选择算法进行示例' }}
      </div>
      <div style="width: 500px; height: 500px; border: 1px solid #d4d7e0; margin-left: 5px; overflow: auto">
        <json-viewer
                :value="result"
                :expand-depth="5"
                copyable
                sort
        ></json-viewer>
      </div>
    </div>
    <div class="dci">MIT Licensed | Copyright © 2021-Sirio | E-mail:caoxinyu954711908@gmail.com</div>
  </div>
</template>

<script>
  import dataList1 from './data'
  import dataList2 from './data2'
  import dataList3 from './data3'
  export default {
    name: "index",
    data() {
      return {
        dataaa: null,
        databb: null,
        datacc: null,
        result: null,
        flag: null
      }
    },
    created() {
      this.dataaa = dataList1
      this.databb = dataList2
      this.datacc = dataList3
    },
    methods: {
      // a原始数据、b子组个数、c子组容量、
      aaa (a, b, c) {
        this.result = this.$spcTools.spcTools.xRControl(a, b, c)
        // console.log(this.result);
      },
      // a原始数据、b子组个数、c子组容量、
      bbb (a, b, c) {
        this.result = this.$spcTools.spcTools.xSControl(a, b, c)
        // console.log(this.result);
      },
      // a原始数据、b子组个数、c子组容量、eSigma倍数
      ccc (a, b, c, d, e) {
        this.result = this.$spcTools.spcTools.cpkChart(a, b, c, d, e)
        // console.log(this.result);
      },
      ddd (a, b) {
        this.result = this.$spcTools.spcTools.histogram(a, b)
        // console.log(this.result);
      },
      eee (a) {
        this.result = this.$spcTools.spcTools.permutationChart(a)
        // console.log(this.result);
      },
      fff (a) {
        this.result = this.$spcTools.spcTools.sampleTrendChart(a)
        console.log(this.result);
      },
      ggg (a, b, c) {
        this.result = this.$spcTools.spcTools.basicTrendChart(a, b, c)
        console.log(this.result);
      }
    }
  }
</script>
<style scoped>
  .dci {
    position: absolute;
    bottom: 5px;
    width: 99%;
    text-align: center;
    color: #cccccc;
    font-size: 10px;
  }
</style>
